<template>
  <div class="main-container bg">
    <search></search>
    <van-row class="bg_white mar-top col-height">
      <van-col span="8">
        <a href="#" class="pos-a">新品</a>
      </van-col>
      <van-col span="8">
        <a href="#" @click="getPrice" class="pos-a">价格
          <span class="icon iconfont icon-shixiangxiajiantou- sort-up" :class="{'sort-active':!sortFlag}"></span>
          <span class="icon iconfont icon-shixiangxiajiantou- sort-down" :class="{'sort-active':sortFlag}"></span>
        </a>
      </van-col>
      <van-col span="8">
        <a href="#" @click="getSales" class="pos-a"> 销量
          <span class="icon iconfont icon-shixiangxiajiantou- sort-up" :class="{'sort-active':!salesFlag}"></span>
          <span class="icon iconfont icon-shixiangxiajiantou- sort-down" :class="{'sort-active':salesFlag}"></span>
        </a>
      </van-col>
    </van-row>
    <div class="grid">
      <ul class="ul_grid">
        <li v-for="(item,index) in products" :key="index">
          <router-link class="" :to="{path:'/typepage/productDetails',query:{'id':item.id}}">
            <div class="center-block state_c "><img :src="item.imagePath" /></div>
            <h3 :title="item.title">{{item.title}}</h3>
            <p>￥<span>{{item.price}}</span></p>
         </router-link>
        </li>
      </ul>
    </div>
    我是产品展示页--{{id}}
  </div>
</template>
<script>
import search from "@/components/Search/Search";
export default {

  created() {
    // this.id=this.$route.query.id

  },
  data() {
    return {
      id: this.$route.query.id,
      sortFlag: true,
      salesFlag: true,
      products: [{
        id: "1",
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "http://img.hlamall.cn/hnzad1r015a/1547457027085.jpg",
        title: "HLA海澜之家简约时尚卫衣2019",
        price: "318"
      }, {
        id: "2",
        desc: "夹克",
        english: "JACKETS",
        imagePath: "http://img.hlamall.cn/sources/goods/HNTJD4E116A/HNTJD4E116A_21625_1.jpg",
        title: "HLA海澜之家净色圆领卫衣2018秋季新品针织套头卫衣男",
        price: "198"
      }, {
        id: "3",
        desc: "卫衣",
        english: "SWEATERS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "HLA/海澜之家白色衬衫男斜纹提花长袖衬衫2019春季新品服帖正装HNCAD1R002T",
        price: "188"
      }, {
        id: "4",
        desc: "长袖衬衫",
        english: "SHIRTS",
        imagePath: "http://img.hlamall.cn/hncad1r001t/1550727449233.jpg",
        title: "MEN'S SUITS",
        price: "258"
      }, {
        id: "5",
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "MEN'S SUITS",
        price: "256"
      }, {
        id: "6",
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "MEN'S SUITS",
        price: "218"
      }, {
        id: "7",
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "MEN'S SUITS",
        price: "256"
      }, {
        id: "8",
        desc: "单西",
        english: "MENS SUITS",
        imagePath: "https://img.yzcdn.cn/public_files/2017/10/24/e5a5a02309a41f9f5def56684808d9ae.jpeg",
        title: "MEN'S SUITS",
        price: "218"
      }]
    }
  },
  methods: {
    getPrice() {
      this.sortFlag = !this.sortFlag;
    },
    getSales() {
      this.salesFlag = !this.salesFlag;
    }
  },
  components: {
    search
  }
}
</script>
<style lang="scss" scoped>
.col-height {
  text-align: center;
  padding-top: 5px;
  padding-bottom: 5px;
}
.van-col {
  line-height: 30px;
}
.pos-a {
  position: relative;
  width: 100px;
  display: inline-block;
  color: #333333;
  text-decoration: none;
}
.van-col:not(:last-child) {
  border-right: 1px solid #cccccc;
}
.grid {
  width: 100%;
  display: inline-block;
  padding: 0px 2px;
}

.ul_grid {
  list-style: none;
}

.ul_grid li {
  width: 49.9%;
  background: #fff;
  float: left;
  border: 3px solid #eee;
  text-align: center;
  box-sizing: border-box;
  p {
    font-size: 12px;
    color: red;
    padding: 0px;
    margin: 0px;
    text-align: left;
    span {
      font-size: 16px;
      font-weight: bold;
    }
  }
}

.ul_grid li h3 {
  //   text-align: left;
  margin-top: 1px;
  font-size: 14px;
  height: 25px;
  line-height: 25px;
  overflow: hidden;
  color: #555;
  padding: 0px;
  margin: 0px;
}

.center-block {
  display: block;
  margin-right: auto;
  margin-left: auto;
}

.state_c {
  img {
    width: 100%;
    height: 180px;
  }
}

.sort-up {
  display: block;
  position: absolute;
  font-size: 10px;
  transform: scale(1, -1);
  top: -4px;
  left: 64%;
  color: #cccccc;
  z-index: 2;
}
.sort-down {
  display: block;
  position: absolute;
  font-size: 10px;
  top: 4px;
  left: 64%;
  color: #cccccc;
  z-index: 2;
}
.sort-active {
  color: #000 !important;
}
</style>
